<template>
	<view class="circle">
		<!-- 搜索栏 -->
		<view class="circle-search">
			<Search isNavigate="true" path="/pages/searchCircle/searchCircle" style="flex:1;"/>
			<view class="circle-add" @click="handleNewCircle()">
				<icon class="iconfont icon-jiahao"/>
				创建
			</view>
		</view>
		<view  class="circle-container" v-if="menu && menu.length">
			<view class="circle-item" v-for="(item,index) in menu" :key="index" @click="handleDetail(item)">
				<view class="circle-left">
					<image  class="circle-image" :src="item.circle_avatar" mode="scaleToFill"></image>
					<view class="circle-infor">
						<view class="circle-name">{{item.circle_name}}</view>
						<view class="circle-hot">
							{{formatNumber(item.hotness)}}热度 
							{{formatNumber(item.fans_count)}}粉丝
						</view>
						<view class="circle-description">{{item.circle_description}}</view>
						<!-- <up-text class="circle-hot" :lines="1"  :text="item.circle_description"></up-text> -->
					</view>
				</view>
				<view class="circle-follow">
					<button
						v-if="!item.is_follower"
						size="mini" 
						type="primary" 
						class="btn"
						plain="true"
						hairline="true" 
						hover-class="none" 
						@click.stop="clickFollow(item)">关注</button>
					<button
						v-else
						size="mini" 
						type="primary" 
						class="btn follow"
						plain="true"
						hairline="true" 
						hover-class="none" 
						@click.stop="clickFollow(item)">已关注</button>
				</view>
			</view>
		</view>
		<up-empty
			v-else
			class="empty_box"
			mode="data"
			>
		</up-empty>
	</view>
	
</template>

<script lang="ts" name="" setup>
	import Search from '../../components/search/search.vue'
	import formatNumber from '../../common/formatNumber.js'
	import {getCircles , getCircleDetail , postJoinCircle } from '../../apis/circle'
	import { ref,getCurrentInstance, onMounted } from 'vue'
	let menu = ref([])
	
	onMounted(()=>{
		init();
	})
	
	async function init(){
		const {data} = await getCircles();
		menu.value = data;
		// console.log(menu.value);
	}
	// 关注圈子
	async function clickFollow(item){
		console.log("关注圈子");
		item.is_follower = !item.is_follower;
		const res = await postJoinCircle({
			circle_id:item.circle_id+"",
			is_follower:item.is_follower
		})
	}
		
	function handleNewCircle(){
		uni.navigateTo({
			url:'/pages/newCircle/newCircle'
		})
	}
	function handleDetail(index){
		console.log(index.circle_id);
		console.log('跳转');
		uni.navigateTo({
			url:`/pages/circleDetail/circleDetail?circle_id=${index.circle_id}`
		})
	}
	
</script>

<style lang="scss" scoped>
	.circle{
		background-color: white;	
		.circle-search{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.circle-add{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 25upx;
				margin-right: 30upx;
			}
		}
		.circle-container{
			padding-top: 20upx;
			.circle-item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 15upx 30upx;
				border-bottom: 1upx solid #eee;
				.circle-left{
					display: flex;
					align-items: center;
					width: 75%;
					.circle-image {
						width: 100upx;
						height: 100upx;
						border-radius: 20upx;
						margin-right: 20upx;
					}
					.circle-infor{
						width: 60%;
						.circle-name{
							font-size: 30upx;
							font-weight: 500;
						}
						.circle-hot{
							font-size: 25upx;
							color: $text;
							margin-top: 10upx;
						}
						.circle-description{
							font-size: 20upx;
							color: $text;
							white-space: nowrap; 
							overflow: hidden;
							text-overflow:ellipsis;
						}
					}
				}
				.circle-follow{
					.btn{
						border-color:$primary;
						color:$primary;
						border-radius: 50rpx;
						white-space: nowrap;	
						padding: 0 30upx;
						font-size: 30upx;
					}
						
					.follow{
						border-color:$text;
						color:$text;
					}
				}
			}
		}
		.empty_box{
			padding: 30upx 0;
		}
	}	
	
	
</style>
